<template>
  <van-overlay class="m-loading" :show="show" @click="onHide">
    <div class="loadbox" @click.stop>
      <van-loading type="spinner" color="white" vertical>loading...</van-loading>
    </div>
  </van-overlay>
</template>

<script>
import { Overlay, Loading } from 'vant'
export default {
  components: {
    [Overlay.name]: Overlay,
    [Loading.name]: Loading
  },
  name: 'Loading',
  computed: {
    show() {
      return this.$store.state.LOADING
    }
  },
  methods: {
    onHide() {
      this.$store.commit('HLOADING')
    }
  }
}
</script>
<style lang="less" scoped>
.m-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  .loadbox {
    padding: 50px;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.5);
  }
}
</style>
